<template>
  <view class="alldiv">
    <view class="topBox">
      <!-- 第一层搜索和返回 -->
      <view class="topdiv">
        <image src='@/static/icon/shop/topBj2.png' class="background-image"></image>
        <view class="navdiv" @click="navigateBack">
          <u-icon name="arrow-left" size="17" color="rgba(0,0,0,0.9)"></u-icon>
        </view>
        <view class="searchfordiv" :class="{'endSearchfordiv': locationType}">
          <u-search
            shape="round"
            searchIcon=""
            :placeholder="locationType ? language.FreeRide.endLocationPlaceholder : language.FreeRide.startLocationPlaceholder"
            :showAction="false"
            v-model.trim="searchval"
          ></u-search>
        </view>
      </view>
      <!-- 快捷键 -->
      <shortcut :language="language" style="margin: 4px 16px 0 20px;" />
      <!-- 快捷地址 -->
      <view class="address">
        <view class="address-div">
          <text class="title van-ellipsis" :style="{color: address1 ? 'rgba(102, 102, 102, 1)' : 'rgba(153, 153, 153, 1)'}">{{ address1 ? address1 : language.FreeRide.homePlaceholder + ' >' }}</text>
        </view>
        <view class="address-div">
          <text class="title van-ellipsis" :style="{color: address2 ? 'rgba(102, 102, 102, 1)' : 'rgba(153, 153, 153, 1)'}">{{ address2 ? address2 : language.FreeRide.corporationPlaceholder + ' >' }}</text>
        </view>
      </view>
    </view>
    <!-- 内容内容 -->
    <view class="bodydiv">
      <view class="options">
        <text>{{ language.Searchfor.listtitle }}</text>
        <view class="right">
          <text class="text">{{ language.Searchfor.qk }}</text>
          <text class="text">{{ language.Searchfor.gl }}</text>
        </view>
      </view>
      <!-- 历史列表 -->
      <view class="Searchhistorydiv">
        <u-cell-group>
          <u-cell size="large" v-for="(item, i) in historyList" :key="i">
            <view slot="title" class="setwodiv" @click="selectLocation(item)">
              <view class="setdd">
                <image
                  style="width: 15px; height: 15px"
                  src="../../static/image/position.png"
                  mode="scaleToFill"
                />
                <text class="title van-ellipsis">{{ item.title }}</text>
              </view>
              <view class="content">
                <text>{{ item.content }}</text>
                <text class="num">{{ item.num }}</text>
              </view>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <!-- 搜索列表 -->
    <view class="search-div" v-if="searchList.length">
      <u-cell-group>
        <u-cell size="large" v-for="(item, i) in searchList" :key="i">
          <view slot="title" class="setwodiv" @click="clickLocation(item)">
            <view class="setdd">
              <text class="title van-ellipsis">{{ item.description }}</text>
            </view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
import shortcut from './shortcut.vue';
import GoogleMap from "@/mixins/GoogleMap";
export default {
  components: {
    shortcut
  },
  mixins: [GoogleMap],
  props: {
    language: {
      type: Object,
      default: () => ({})
    },
    locationType: { // 地点类型：0起点, 1终点
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      searchval: '',
      address1: 'xxxxxx（家庭地址）',
      address2: '',
      historyList: [
        { title: '历史搜索记录历史搜索记录历史搜索记录历史搜索记录历史搜索记录历史搜索记录历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' },
        { title: '历史搜索记录', content: '历史记录具体地址历史记录具体地址历史记录具体地址', num: '2.9km' }
      ],
      searchList: []
    }
  },
  watch: {
    searchval(val) {
      if (val) {
        this.getPlacesList(val).then(res => {
          this.searchList = res || []
        })
      } else {
        this.searchList = []
      }
    }
  },
  methods: {
    // 返回上一个页面
    navigateBack() {
      this.$emit('navigateBack')
    },
    // 点击历史列表
    selectLocation(item) {
      this.$emit('selectLocation', {
        address: item.title,
        latitude: item.latitude,
        longitude: item.longitude
      })
    },
    // 点击搜索列表
    clickLocation(item) {
      this.getDetailByPlaceId(item.place_id).then(res => {
        if (res.latitude) {
          this.$emit('selectLocation', {
            ...res,
            address: item.description
          })
        } else {
          uni.showToast({
            title: language.FreeRide.addressErr,
            icon: 'none',
            duration: 2000
          });
        }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .topBox {
    position: relative;
    width: 100%;
    background: linear-gradient(94.07deg, rgba(235, 255, 236, 1) 0%, rgba(220, 247, 242, 1) 100%);
    overflow: hidden;
    flex-shrink: 0;
    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 34px;
      display: flex;
      margin: calc(var(--status-bar-height) + 10px) 0 4px 0;
      // 这个是返回样式
      .navdiv {
        width: 40px;
        height: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
      }
      // 这个是搜索样式
      .searchfordiv {
        position: relative;
        width: calc(100% - 56px);
        height: 100%;
        display: flex;
        &::before {
          position: absolute;
          top: 14px;
          left: 16px;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: rgba(47, 212, 184, 1);
        }
        &.endSearchfordiv {
          &::before {
            background-color: rgba(255, 141, 26, 1);
          }
        }
        ::v-deep {
          .u-search__content {
            background: rgba(255, 255, 255, 1)!important;
            box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
          }
          .u-search__content__input {
            background: rgba(255, 255, 255, 1)!important;
          }
          .u-search__content__icon {
            width: 20px;
          }
        }
      }
    }
    .address {
      position: relative;
      overflow: auto;
      display: flex;
      margin-bottom: 20px;
      .address-div {
        margin: 0 16px;
        flex: 1;
        flex-shrink: 0;
        border-radius: 4px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
        line-height: 30px;
        padding: 0 12px;
        font-size: 12px;
        &:first-child {
          margin-right: 0;
        }
      }
    }
  }
  .bodydiv {
    flex: 1;
    height: 0;
    overflow-y: hidden;
    background-color: #fff;
    .options {
      line-height: 50px;
      padding: 0 16px;
      font-size: 14px;
      color: rgba(56, 56, 56, 1);
      .right {
        float: right;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        .text {
          position: relative;
          padding: 0 8px;
          &:first-child {
            &::after {
              position: absolute;
              content: '';
              width: 1px;
              height: 8px;
              top: 3px;
              right: 0;
              background-color: rgba(217, 219, 218, 1);
            }
          }
        }
      }
    }
    .Searchhistorydiv {
      height: calc(100% - 50px);
      overflow-y: auto;
      ::v-deep {
        .u-line {
          border-bottom: none!important;;
        }
      }
    }
    .setwodiv {
      .setdd {
        display: flex;
        align-items: center;
        .title {
          flex: 1;
          width: 0;
          margin-left: 15px;
          font-size: 14px;
          color: rgba(56, 56, 56, 1);
        }
      }
      .content {
        display: flex;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
        justify-content: space-between;
        padding-left: 30px;
        margin-top: 4px;
      }
      .num {
        width: 50px;
        justify-items: baseline;
        text-align: right;
        display: inline-block;
        flex-shrink: 0;
      }
    }
  }
}
.search-div {
  position: fixed;
  bottom: 0;
  height: calc(100vh - var(--status-bar-height) - 48px);
  width: 100vw;
  background-color: #fff;
  overflow-y: auto;
  ::v-deep {
    .u-line {
      border-bottom: none!important;;
    }
  }
  .setdd {
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      width: 0;
      margin-left: 15px;
      font-size: 14px;
      color: rgba(56, 56, 56, 1);
    }
  }
}
</style>
